import './index.scss';
import { Button,ConfigProvider, Flex,Col, Divider, Row } from 'antd';
import { useResponsive } from 'antd-style';
import { useNavigate } from "react-router-dom"
import 'antd/dist/reset.css';
import PieChart from "./bpie";
import PageTypeTable from './table';
import PageRanking from './list'
import TableEx from './table2'
import ActivityChart from './line';
function App() {
  const navList = [
    { id: 1, text: '工作区', nav:'/workplace'},
    { id: 2, text: '数据', nav:'/dataplace'},
    { id: 3, text: '流程', nav:'/processplace'},
  ];
  const srcList = [
    { id: 4, srclink: 'https://files.axshare.com/gsc/E0X74M/65/fb/63/65fb63072f9046cbaf187bad96ce4501/images/实用程序-入口/u31.svg?pageId=123e1be7-a668-4862-b52c-4cd45d6fe954'},
    { id: 5, srclink: 'https://files.axshare.com/gsc/E0X74M/65/fb/63/65fb63072f9046cbaf187bad96ce4501/images/实用程序-入口/u15.svg?pageId=123e1be7-a668-4862-b52c-4cd45d6fe954'},
    { id: 6, srclink: 'https://files.axshare.com/gsc/E0X74M/65/fb/63/65fb63072f9046cbaf187bad96ce4501/images/实用程序-入口/u37.svg?pageId=123e1be7-a668-4862-b52c-4cd45d6fe954'},
    { id: 7, srclink: 'https://files.axshare.com/gsc/E0X74M/65/fb/63/65fb63072f9046cbaf187bad96ce4501/images/实用程序-入口/头像_u38.svg?pageId=123e1be7-a668-4862-b52c-4cd45d6fe954'},
    
  ];
  const data = [
    { type: "A", value: 30 },
    { type: "B", value: 20 },
    { type: "C", value: 50 },
  ];
  const { xxl } = useResponsive();
  const navigate = useNavigate();
  return (
<>
  <div>
    <header className="header">
      <nav className="nav">
      <img onClick={()=>navigate('/workplace')}
        src="https://files.axshare.com/gsc/E0X74M/65/fb/63/65fb63072f9046cbaf187bad96ce4501/images/工作区/u3.svg?pageId=96cff69c-2f2c-44fb-b4b0-7839847c66fc"
        className="userava"
        alt="user logo" />
      <span  className="compname" onClick={()=>navigate('/workplace')}>Eson CODE</span>
      <div className="buttons-container">
        <ConfigProvider componentSize={xxl ? 'middle' : 'small'}>
          <Flex vertical gap="small">
            <Flex gap="small" wrap>
            {navList.map(item => (
              <Button color="default" variant="link" key={item.id} onClick={()=>navigate(item.nav)}>
                {item.text}
              </Button>
              ))}
            </Flex>
          </Flex>
        </ConfigProvider>
      </div>
        <div className="search-container">    <input 
          type="text" 
          className="search-input"
          placeholder="搜索"
        />
          <button  className="search-button" >搜索</button>
        </div>
        <div className= "right-img1">
          <img 
        src="https://files.axshare.com/gsc/E0X74M/65/fb/63/65fb63072f9046cbaf187bad96ce4501/images/%E5%AE%9E%E7%94%A8%E7%A8%8B%E5%BA%8F-%E5%85%A5%E5%8F%A3/%E6%A8%A1%E6%9D%BF%E4%B8%AD%E5%BF%83_u46.png?pageId=123e1be7-a668-4862-b52c-4cd45d6fe954"  // 你的图片路径
        className="muban center"
        alt="标志logo" />
        </div>
        <div>
        {srcList.map(item => (
                  <img className = "right-img2" onClick="handleClick()" key = {item.id} src={item.srclink} alt="标志logo"/>
                  ))}
        </div>
      </nav>
    </header>
  </div>
  <div>
  <div  className="lan">
    <img className = 'lanpic' onClick = {()=>navigate('/application')} src="https://files.axshare.com/gsc/E0X74M/65/fb/63/65fb63072f9046cbaf187bad96ce4501/images/实用程序-入口/u50.svg?pageId=123e1be7-a668-4862-b52c-4cd45d6fe954" alt="pic" />
    <span onClick = {()=>navigate('/application')} className = 'lanfont1'> 应用程序1 </span>
    <span onClick = {()=>navigate('/application')} className = 'lanfont2'> \实用程序 </span>
    <button className='lanbutton'>返回</button>
  </div>
  </div>
  <div style={{ background: '#F5F5F5', minHeight: '100vh', padding: '20px', position: 'relative'}} >
  {/* 第一行 */}
  <Row gutter={50} style={{marginRight:'8px', alignItems: 'stretch'}}>
    <Col flex={1} style={{ marginLeft: '28px', borderRadius: '10px' ,background: 'white', display: 'flex', flexWrap: 'nowrap' }}>
      <div style={{ width: '100%', height: '100%' , marginBottom: '15px' }}>
        <PageTypeTable />
      </div>
      <div style={{ marginLeft: 20, marginBottom: '15px' }}>
        <PieChart />
      </div>
    </Col>
    <Col flex={5} style={{ marginLeft: '20px', background: 'white', paddingLeft: '18px', display: 'flex', flexWrap: 'nowrap', borderRadius: '10px' }}>
      <div style={{ width: '100%', height: '100%', marginLeft: 20, marginTop: 20, marginBottom: '15px',marginRight: '13px', }}>
        <TableEx />
      </div>
    </Col>
  </Row>

  {/* 第二行，向上偏移以重叠 */}
  <Row gutter={50} wrap={false} style={{marginRight:'8px' , alignItems: 'stretch',  marginTop: '20px', position: 'relative', zIndex: 1 }}>
    <Col flex="600px" 
      style={{ marginLeft: '28px', background: 'white', display: 'flex', flexWrap: 'nowrap', borderRadius: '10px' }}>
      <div style={{  width: '100%', height: '100%',marginLeft: 20, marginBottom: '15px' }}>
        <PageRanking />
      </div>
    </Col>
    <Col flex="auto" style={{ marginLeft: '20px', background: 'white', display: 'flex', flexWrap: 'nowrap', borderRadius: '10px' }}>
      <div style={{ width: '100%', height: '100%', marginTop: 20,marginBottom: '15px' }}>
        <ActivityChart />
      </div>
    </Col>
  </Row>
</div>

  
</>
)

}

export default App;
